<template>
  <div class="projectManagement model-content">
    <div class="head">
      <el-input v-model="projectName" placeholder="项目名称" />
      <div>
        <el-button type="primary" @click="getTablepage">查询</el-button>
        <el-button type="primary" @click="initTable">重置</el-button>
      </div>
    </div>
    <div>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addNewRow"
      >添加项目</el-button>
    </div>
    <div ref="tablecontent" class="projectManagement-table">
      <el-table
        v-if="tableHeight"
        v-loading="isTableLoading"
        :max-height="tableHeight"
        :header-cell-style="{
          'text-align': 'center'
        }"
        :cell-style="{
          'text-align': 'center'
        }"
        header-row-class-name="header-row"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          v-for="(item, index) in tableHead"
          :key="index"
          :width="index === 0 ? 120 : null"
          :prop="item.key"
          :label="item.label"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="medium"
              type="primary"
              @click="editRow(scope)"
            >编辑</el-button>
            <el-button
              :loading="scope.row.delLoading"
              size="medium"
              type="danger"
              @click="delRow(scope)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="pageIndex"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <Dialog-Add
      :row-now="rowNow"
      :is-show="isDialogShow"
      @dialogDeal="dialogDeal"
      @dialogClose="closeDialog"
    />
  </div>
</template>

<script type="text/ecmascript-6">
import {
  getJobProject,
  updateJobProject,
  createJobProject,
  queryByIdJobProject,
  deleteJobProject
} from '@/api/projectManagement';
import DialogAdd from './components/Dialog';
export default {
  components: {
    DialogAdd
  },
  data() {
    return {
      pageIndex: 0,
      pageSize: 100,
      pageTotal: 0,
      projectName: '',
      rowNow: {},
      tableHead: [
        {
          label: '序号',
          key: 'idd'
        },
        {
          label: '项目名称',
          key: 'name'
        },
        {
          label: '项目描述',
          key: 'description'
        },
        {
          label: '所属用户',
          key: 'userName'
        },
        {
          label: '创建时间',
          key: 'createTime'
        }
      ],
      tableData: [],
      tableHeight: 0,
      isDialogShow: false,
      isTableLoading: false
    };
  },
  mounted() {
    this.tableHeight = this.$refs.tablecontent.offsetHeight;
    this.getTablepage();
  },
  methods: {
    initTable() {
      this.projectName = '';
      this.pageIndex = 0;
      this.getTablepage();
    },
    editRow(scope) {
      this.openDialog();
      this.rowNow = scope.row;
    },
    delRow({ row, $index }) {
      const { id } = row;
      row.delLoading = true;
      queryByIdJobProject({ projectId: id }).then(info => {
        if (info.success) {
          this.confirmDel(info.data && info.data.length > 0).then(() => {
            deleteJobProject({
              idList: [id]
            }).then(res => {
              row.delLoading = false;
              if (res.success) {
                this.pageTotal = this.pageTotal - 1;
                this.tableData.splice($index, 1);
              }
            });
          },
          () => {
            row.delLoading = false;
          });
        } else {
          row.delLoading = false;
        }
      });
    },
    confirmDel(type) {
      let str = '是否立即删除该项目?';
      type && (str = `
        当前项目下还存在执行任务，如果删除该任务提示会清空对应所有任务，
        是否继续删除该项目?
      `);
      return this.$confirm(str, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return Promise.resolve();
      }, () => {
        return Promise.reject();
      });
    },
    handleSizeChange(n) {
      this.pageSize = n;
      this.getTablepage();
    },
    handleCurrentChange(n) {
      this.pageIndex = n - 1;
      this.getTablepage();
    },
    getTablepage() {
      const {
        pageIndex,
        pageSize,
        projectName
      } = this;
      this.isTableLoading = true;
      getJobProject({
        pageIndex,
        pageSize,
        projectName
      }).then(res => {
        this.isTableLoading = false;
        if (res.success) {
          res.data.forEach((item, index) => {
            item.idd = index;
            item.delLoading = false;
          });
          this.tableData = res.data;
          this.pageTotal = res.total;
        }
      });
    },
    closeDialog() {
      this.isDialogShow = false;
    },
    openDialog() {
      this.isDialogShow = true;
    },
    addNewRow() {
      this.rowNow = {};
      this.openDialog();
    },
    dialogDeal({ row, type }) {
      const { name, description } = row;
      if (type === 'add') {
        createJobProject({
          name,
          description
        }).then(res => {
          if (res.success) {
            this.$message.success(res.message);
            this.closeDialog();
            this.initTable();
          }
        });
      }

      if (type === 'edit') {
        updateJobProject(row).then(res => {
          if (res.success) {
            this.$message.success(res.message);
            this.rowNow.name = row.name;
            this.rowNow.description = row.description;
            this.rowNow = {};
            this.closeDialog();
          }
        });
      }
    }

  }
};
</script>

<style lang="less" scoped>
.projectManagement {
  padding: 20px;
  > div {
    margin: 10px 0;
  }
  .head {
    display: flex;
    align-items: center;
    > div {
      margin-right: 10px;
    }
    /deep/ .el-input {
      width: 200px;
    }
  }

  .projectManagement-table {
    width: 100%;
    height: calc(100% - 40px - 10px - 32px - 60px);
    margin: 10px 0;
  }
}

/deep/ * {
  .header-row {
    text-align: center;
    width: 100%;
  }
}
</style>
